<template>
  <div>
    <Form :model="searchForm" label-position="right" ref="resourceForm" :label-width="100" inline>
      <!-- 资源编码 -->
      <Form-item prop="resourceCode" :label="$t('module.resourceManage.resCode')">
        <Input
          type="text"
          v-model.trim="searchForm.resourceCode"
          :placeholder="$t('module.resourceManage.enterCode')"
          @on-enter="search"
          @on-blur="codeToUpperCase"
        ></Input>
      </Form-item>

      <!-- 资源名称 -->
      <Form-item prop="resourceName" :label="$t('module.resourceManage.resName')">
        <Input
          type="text"
          v-model.trim="searchForm.resourceName"
          :placeholder="$t('module.resourceManage.enterName')"
          @on-enter="search"
        ></Input>
      </Form-item>
      <!-- 应用 -->
      <Form-item
        prop="enabled"
        :label="$t('module.resourceManage.application')"
        style="width:286px;"
      >
        <Select
          :placeholder="$t('module.resourceManage.selectApplication')"
          v-model="searchForm.applicationId"
          filterable
          transfer
          @on-change="selectApplication"
          clearable
        >
          <Option
            v-for="item in applicationList"
            :value="item.clientId"
            :key="item.clientId"
            :label="item.appName"
          ></Option>
        </Select>
      </Form-item>
      <!-- 查询\重置按钮 -->
      <Form-item prop="button" style="width:286px; text-align:right;">
        <RPButton optType="search" @click="search" style="background:#ff6f4b;" />
        <RPButton optType="reset" @click="reset" />
      </Form-item>
    </Form>
    <InnerPageTable
      ref="resourceTable"
      :config="tableConfig"
      style="min-height:480px; max-height:640px;"
    ></InnerPageTable>
  </div>
</template>

<script>
import ResourceEdit from "./ResourceEdit.vue";
import CopyResource from "./CopyResource.vue";
import AssignResource from "./AssignResource.vue";
import { pageResUnallocated, batchMount } from "@/api/resourceApi.js";
import { searchAppList } from "@/api/applicationApi.js";
import { getRolePostId } from "@/api/postApi.js";
import functionAPI from "@/api/functionAPI.js";
import { selectApiColumns } from "./columns.js";
import { CoreModuleName } from "@/const.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    applicationList: {
      type: Array,
      default() {
        return [];
      }
    },
    parentResourceId: {
      type: String,
      default() {
        return "";
      }
    },
    applicationId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      searchForm: {
        resourceCode: "",
        resourceName: "",
        parentResourceId: this.parentResourceId,
        applicationId: this.applicationId,
        applicationIds: [],
        resourceTypes: [2,3]
      },
      copyApplicationId: "",
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: this.queryResouceList,
        columnsFn: selectApiColumns.bind(this),
        initParam: this.searchForm,
        autoFirst: true
      };
    },
    resourceType() {
      return [
        this.$t("module.resourceManage.uiResource"),
        this.$t("module.resourceManage.apiResource"),
        this.$t("module.resourceManage.functionalAuthority")
      ];
    }
  },
  created() {
    this.copyApplicationId = JSON.parse(JSON.stringify(this.applicationId));
    this.init();
  },

  methods: {
    assignResource() {},
    init() {
      this.$emit("SetTitle", this.$t("module.resourceManage.selectResource"));
      this.$emit("SetPageWidth", 700);
      this.$emit("SetPageActions", this.actions);
      this.searchForm.applicationIds.push(this.applicationId);
    },
    selectApplication(id) {
      this.searchForm.applicationIds = [];
      if (!id) {
        let allApplication = [];
        this.applicationList.map(item => {
          if (item.clientId != "0") {
            this.searchForm.applicationIds.push(item.clientId);
          }
        });
      } else {
        this.searchForm.applicationIds.push(id);
      }
    },
    getSelectedIds() {
      let list = this.$refs["resourceTable"].getSelectioned() || [];
      let ids = [];
      for (let u of list) {
        ids.push({ parentResourceId: this.parentResourceId, id: u.id });
      }
      return ids;
    },
    save() {
      let selectedIds = this.getSelectedIds();
      if (selectedIds.length == 0) {
        this.$message.error({
          content: this.$t("module.resourceManage.selectMountResource"),
          duration: 3
        });
        return;
      }
      this.actions[0].loading = true;
      batchMount(selectedIds)
        .then(response => {
          this.$message.success({
            content: this.$t("module.resourceManage.mountSuccess"),
            duration: 3
          });
          this.search();
          this.$emit("Close", true);
        })
        .catch(data => {
          this.$message.error({
            content: data.message,
            duration: 3
          });
        });
    },
    search() {
      this.codeToUpperCase();
      this.$refs["resourceTable"].load(this.searchForm);
    },
    reset() {
      this.$refs["resourceForm"].resetFields();
      this.search();
    },
    add() {},
    deleted() {},
    queryResouceList({ responseProcess, param }) {
      param.applicationId = this.copyApplicationId;
      param.condition.applicationId = this.copyApplicationId;
      pageResUnallocated(param).then(data => {
        responseProcess(data.data);
      });
    },
    codeToUpperCase() {
      this.searchForm.resourceCode = this.searchForm.resourceCode.toUpperCase();
    }
  }
};
</script>

<style lang="less">
</style>
